<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit">

    <title>PIE注册申请</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link href="../../css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="../../font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../css/style.css?v=2.2.0" rel="stylesheet">

</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
        <div>

            <h1 class="logo-name">PIE</h1>

        </div>
        <h3>欢迎注册 PIE</h3>
        <p>申请一个PIE新账户</p>
        <form class="m-t" role="form" id="form" >
            <div class="form-group">
                <input type="email" class="form-control" id="email"placeholder="请输入邮箱" required="">
            </div>
            <div class="form-group draggable">
                <div class="">
                    <select class="form-control" id="type"name="">
                        <option>养殖场</option>
                        <option>屠宰场</option>
                        <option>物流</option>
                        <option>超市</option>
                    </select>
                </div>
            </div>
            <div class="form-group draggable">
                <label class="control-label">营业执照照片</label>
                <div class="form-group">
                    <input type="file" name="" class="form-control" id="picture">
                </div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="registerId" name="zhuce" placeholder="注册号" required="">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="name" name="mingcheng" placeholder="名称" required="">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="location" name="dizhi" placeholder="地址" required="">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="legalrep" name="faren" placeholder="法人代表" required="">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="capital" name="ziben" placeholder="注册资本" required="">
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label m-t-sm">成立日期</label>
                <div class="col-sm-8 form-group">
                    <input id="hello" type="text" class="laydate-icon form-control layer-date">
                </div>
            </div>
            <button type="button" class="btn btn-primary block full-width m-b"id="button">注 册</button>

            <p class="text-muted text-center"><small>已经有账户了？</small><a href="Login.html">点此登录</a>
            </p>

        </form>
    </div>
</div>

<!-- Mainly scripts -->
<script src="../../js/jquery-3.3.1.js"></script>
<script src="../../js/bootstrap.min.js?v=3.4.0"></script>
<!-- layerDate plugin javascript -->
<script src="../../js/plugins/layer/laydate/laydate.js"></script>
<script>
    //外部js调用
    laydate({
        elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>

<script>
    $(document).ready(function()
    {
        $("#button").click(function()
        {
            //获取文件
            var file = $("#form").find("input")[1].files[0];
            // alert(file);

            //创建读取文件的对象

            var reader = new FileReader();

            //创建文件读取相关的变量
            var imgFile;

            //正式读取文件
            reader.readAsDataURL(file);

            //为文件读取成功设置事件
            reader.onload = function (e) {
                //alert('文件读取完成');
                //截取字符串base64
                imgFile=reader.result.substring(reader.result.indexOf(",") + 1,reader.result.length);

                var registration={
                    registrationId:$("#registerId").val(),
                    type:$("#type").val(),
                    email:$("#email").val(),
                    picture:imgFile,
                    name:$("#name").val(),
                    location:$("#location").val(),
                    legalRep:$("#legalrep").val(),
                    capital:$("#capital").val(),
                    destablishment:$("#hello").val(),
                    account:"",
                    password:""

                }
                var Registration=JSON.stringify(registration)

                $.post({
                    url: "http://localhost:8080/registration",
                    headers: {
                        "content-Type": "application/json;charset=utf-8"
                    }
                },Registration,function (data) {

                    alert(data);
                    location.reload();
                })
            };
        })
    })
</script>
<script src="../../js/plugins/validate/jquery.validate.min.js"></script>
<script src="../../js/plugins/validate/messages_zh.min.js"></script>
<script>
    $(document).ready(function () {
        $("#form").validate({
            rules:{
                zhuce:{
                    required:true,
                    number:true,
                    maxlength:6
                },
                mingcheng:{
                    required:true,
                    maxlength:15
                },
                dizhi:{
                    required:true,
                    maxlength:20
                },
                faren:{
                    required:true,
                    maxlength:5
                },
                ziben:{
                    required:true,
                    number:true,
                    maxlength:10
                }

            }
        })
    })
</script>


</body>

</html>
